<template>
  <div class="app-container">
    <el-input class="w-64" placeholder="请输入分类编号" v-model.trim="keyword">
      <el-button slot="append" icon="el-icon-search" @click="fetch"></el-button>
    </el-input>

    <el-table
      class="mt-2"
      v-loading="loading"
      :data="rows"
      border
      highlight-current-row
    >
      <el-table-column type="index" width="100" />

      <el-table-column property="attrName" label="名称" width="300" />

      <el-table-column property="attrValues" label="值" width="120" />
    </el-table>

    <the-page ref="page" @change="fetch" />
  </div>
</template>

<script>
import thePage from '@/components/page.vue'
export default {
  components: { thePage },
  data() {
    return {
      rows: [],
      loading: true,
      keyword: null,
      page: null
    }
  },
  mounted() {
    this.page = this.$refs.page
    this.fetch()
  },
  methods: {
    fetch() {
      this.loading = true
      this.axios
        .get('/api/attr', {
          params: {
            keyword: this.keyword,
            page: this.page.num,
            size: this.page.size
          }
        })
        .then((res) => {
          this.rows = res.data
          this.page.total = res.total
          this.loading = false
        })
    }
  }
}
</script>
